<template>
  <div class="lefttab-table-container">
    <LeftTab :tabList="tabList" :activeTab="activeTab" @change="changeTab" />
    <TableList
      ref="TableListRef"
      :activeTitle="activeTitle"
      :activeTab="activeTab"
      :activeType="activeType"
    />
  </div>
</template>

<script setup name="system-data-dictionary">
import LeftTab from '@/components/LeftTab';
import TableList from './components/TableList';
import { injectData } from './components/tableConst';
import { nextTick } from 'vue';
const TableListRef = ref();

const tabList = reactive([
  { label: '申请类型', value: 'sqlx', title: '申请类型数据字典列表' },
  { label: '业务组', value: 'ywz', title: '业务组数据字典列表' },
  {
    label: '域名初始化',
    value: 'ymcsh',
    title: '域名初始化数据字典列表',
    type: 'domain_initialize'
  },
  { label: '域名用途', value: 'ymyt', title: '域名用途数据字典列表' },
  {
    label: '站点类型',
    value: 'zdlx',
    title: '站点类型数据字典列表',
    type: 'site_type'
  },
  {
    label: '站点模式',
    value: 'zdms',
    title: '站点模式数据字典列表',
    type: 'site_mode'
  },
  {
    label: '托管类型',
    value: 'tglx',
    title: '托管类型数据字典列表',
    type: 'hosting_type'
  },
  {
    label: '邮箱用途',
    value: 'yxyt',
    title: '邮箱用途数据字典列表',
    type: 'email_usage'
  },
  {
    label: '邮箱模板',
    value: 'yxmb',
    title: '邮箱模板数据字典列表',
    type: 'email_template'
  },
  {
    label: 'FB投放个号类型',
    value: 'ghlx',
    title: 'FB投放个号类型数据字典列表'
  },
  {
    label: 'FB广告账户类型',
    value: 'fbggzhlx',
    title: 'FB广告账户类型数据字典列表',
    type: 'fb_adv_account_type'
  },
  {
    label: 'FB广告代理商',
    value: 'fbggdls',
    title: 'FB广告代理商数据字典列表',
    type: 'fb_adv_agent'
  }
]);
const activeTab = ref(tabList[0].value);
const activeTitle = ref(tabList[0].title);
const activeType = ref(tabList[0].type);

function changeTab(item) {
  activeTab.value = item.id;
  activeTitle.value = item.title;
  activeType.value = item.type;
  nextTick(() => {
    TableListRef.value.initTable();
  });
}

onActivated(() => {
  TableListRef.value.initTable(true);
});

injectData({ activeTab });
</script>

<style lang="scss" scoped></style>
